<template>
  <view>
    <view
      v-for="(item, i) of arr"
      :key="i"
      :class="i == clicknum ? 'item2' : 'item'"
      @click="selecttype(item, i)"
    >
      <view>{{ item.title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { title: "全部", value: null, subtitle: "全部" },
        { title: "临时用电", value: 1, subtitle: "临时用电作业" },
        { title: "高空作业", value: 2, subtitle: "高空作业" },
        { title: "土方开挖", value: 3, subtitle: "土方开挖" },
        { title: "动火作业", value: 4, subtitle: "动火作业" },
        { title: "起重作业", value: 5, subtitle: "起重（吊装）作业" },
        { title: "有限空间", value: 6, subtitle: "有限空间作业" },
        { title: "盲板抽堵", value: 7, subtitle: "盲板抽堵" },
        { title: "沟槽基坑", value: 8, subtitle: "沟槽基坑作业" },
        { title: "其他危险", value: 9, subtitle: "其他危险性较大的作业" },
      ],
      clicknum: 1,
    };
  },
  methods: {
    selecttype(item, i) {
      this.clicknum = i;
      this.$emit("selectheader", item);
    },
  },
};
</script>

<style scoped >
.item,
.item2 {
  width: 100%;
  padding: 25rpx 15rpx;
  box-sizing: border-box;
  text-align: center;
  color: #595757;
  font-size: 28rpx;
  transition: all 0.5s;
  font-family: Source Han Sans CN;
}
.item2 {
  color: #2f66c0;
  position: relative;
  background: #efefef;
}
</style>